<template>
  <div class="course-calendar-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="24">
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
          <el-form-item label="班级名称">
            <el-input
              v-model.trim="queryForm.className"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="课程类型">
            <CourseTypeSelector v-model="queryForm.courseTypeId" />
          </el-form-item>
          <el-form-item label="选择教师">
            <el-select v-model="queryForm.teacherId" placeholder="请选择教师">
              <el-option
                v-for="item in teacherList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学生名字">
            <el-input
              v-model.trim="queryForm.studentName"
              placeholder="请输入学生名字"
              clearable
            />
          </el-form-item>
          <el-form-item label="选择日期">
            <el-date-picker
              v-model="queryForm.courseDay"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              type="primary"
              @click="handleQueryData"
            >
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-left-panel>
    </vab-query-form>

    <CourseCalendar
      :classroom-list="classroomList"
      :course-list="courseList"
      @change-date="handleChangeDate"
    />
  </div>
</template>

<script>
  import CourseTypeSelector from '@/components/Selector/CourseTypeSelector'
  import { getCourseByPage } from '@/apis/course'
  import { getTeacherByPage } from '@/apis/teacher'
  import { getClassroomByPage } from '@/apis/classroom'
  import CourseCalendar from './components/CourseCalendar'

  export default {
    name: 'Calendar',
    components: {
      CourseTypeSelector,
      CourseCalendar,
    },
    data() {
      return {
        loading: false,
        queryForm: {
          pageNum: 1,
          pageSize: 500,
          className: null,
          courseTypeId: null,
          teacherId: null,
          studentName: null,
          startDate: null,
          endDate: null,
        },
        classroomList: [],
        courseList: [],
        teacherList: [],
        courseTypeList: [],
      }
    },
    created() {
      getClassroomByPage().then(({ list }) => {
        this.classroomList = list
      })

      getTeacherByPage().then(({ list }) => {
        this.teacherList = list
      })
    },
    methods: {
      async handleQueryData(params = {}) {
        this.loading = true
        const { list } = await getCourseByPage({
          ...this.queryForm,
          ...params,
        })
        this.courseList = list
        setTimeout(() => {
          this.loading = false
        }, 300)
      },
      handleChangeDate(arg) {
        this.handleQueryData(arg)
      },
    },
  }
</script>
